<template>
  <div class="orderList">
    <OrderTable
      :column="column"
      :multiple="false"
      :tagShow="false"
      :top-css="{
        background: '#f5f8fe',
        height: '.2969rem',
      }"
      :addOrderField="{
        remarks: '', //客户留言
      }"
      :addFactoryField="{
        invoice: false, //是否开具发票
        voucher: false, //是否使用电子使用卷
        remarks: '',
      }"
      :add-order-tr="['remarks']"
      ref="orderTable"
      :factory-data="orderListData"
      :platformCustomer="[
        {
          customer_id: 1,
          customer_name: '平台客服一',
          customer_phone: '17325764719',
        },
        {
          customer_id: 2,
          customer_name: '平台客服二',
          customer_phone: '13580871559',
          qrcode: '/images/qrcode.png',
        },
        {
          customer_id: 3,
          customer_name: '平台客服三',
          customer_phone: '12567871443',
          qrcode: '/images/qrcode.png',
        },
      ]"
    >
      <template #subtotal="{ row }">
        {{ twoFixed(row.total * row.price) }}
      </template>

      <template #goods="{ row }">
        <div class="goods">
          <div class="goods-img"><img v-lazy="publicUrl(row.img)" /></div>

          <div class="goods-right">
            <div class="title overTwo">{{ row.goods_name }}</div>
            <div class="goods-bottom">单号:{{ row.order_no }}</div>
          </div>
        </div>
      </template>

      <template #remarks="{ row }">
        <div class="tr-main">
          <span>客户留言:</span>
          <div class="remark">
            <textarea
              class="textarea"
              maxlength="255"
              v-model="row.remarks"
              placeholder="请输入客户留言"
            ></textarea>
          </div>
        </div>
      </template>
      <template #factoryBottom="{ row, factoryReduces }">
        <div class="invoice">
          <div class="invoice-left">
            <div class="invoice-left-top">
              <div
                class="checkboxImg"
                @click="() => (row.invoice = !row.invoice)"
              >
                <img
                  v-show="row.invoice"
                  :src="publicUrl(`/images/checkbox.png`)"
                />
              </div>
              <span>开具发票</span>
            </div>
            <div class="invoice-left-bottom">
              <span>给工厂留言:</span>
              <div class="remark">
                <textarea
                  class="textarea"
                  maxlength="255"
                  v-model="row.remarks"
                  placeholder="请输入工厂留言"
                ></textarea>
              </div>
            </div>
          </div>
          <div class="invoice-right">
            <div class="invoice-right-part">
              <span class="tips"
                >运费方式：到付/包邮/寄付&nbsp;&nbsp;<span class="red-color"
                  >￥{{ twoFixed(row.freight) }}</span
                ></span
              >
              <span class="tips"
                >店铺合计(含运费)&nbsp;&nbsp;<span class="red-color"
                  >￥{{ twoFixed(factoryReduces.lastPrice) }}</span
                ></span
              >
              <span class="tips"
                >税点费用&nbsp;&nbsp;<span class="red-color"
                  >￥{{ row.invoice ? twoFixed(row.tax) : 0.0 }}</span
                ></span
              >
            </div>
            <div class="invoice-right-part">
              <div class="left-part">
                <p>使用电子现金券抵扣</p>
                <p>(现金:{{factoryReduces.eCash}})</p>
              </div>
              <div class="switch">
                <Switch v-model:value="row.voucher" />
              </div>
            </div>
          </div>
        </div>
      </template>
    </OrderTable>

   
  </div>
</template>
<script setup lang="ts" name="">
import { ref } from "vue";
import OrderTable, { Column, Factory, OrderShow } from "@/components/ShopCart";
import orderList from "@/json/orderList.json";
import { publicUrl, twoFixed } from "@/utils/util";
import Switch from "@/components/Switch/index.vue";





const orderListData = ref<Array<Factory<OrderShow>>>(orderList);

const orderTable = ref<InstanceType<typeof OrderTable>>();

const column = ref<Array<Column>>([
  {
    title: "店铺宝贝",
    slotName: "goods",
    width: 200,
  },
  {
    title: "面料信息/规格",
    dataKey: "spec",
    tdAlign: "center",
    width: 150,
  },
  {
    title: "单价",
    dataKey: "price",
    tdAlign: "center",
    callback: (value: any): string => {
      return twoFixed(value);
    },
    width: 150,
  },
  {
    title: "数量",
    dataKey: "total",
    tdAlign: "center",
    width: 150,
  },
  {
    title: "小计",
    tdAlign: "center",
    slotName: "subtotal",
    width: 150,
  },
]);




defineExpose({orderTable});
</script>
<style scoped lang="scss">
@media screen and (min-width: $pc-min-width) {
  @import "./pc.scss";
}

</style>
